<template >
  <div class="container">
    <van-nav-bar
      title="练车记录"
      left-text="返回"
      left-arrow
      style="background-color: #f4b4b6"
      @click-left="onClickLeft"
    />
    <div class="content">
      <div v-for="item in traineeList" :key="item.id" class="record">
        <van-card
          :desc="item.attendTime"
          :title="item.create_time"
        >
          <template #tags>
            <van-tag plain type="primary">{{item.catogary}}</van-tag>
            <van-tag plain type="primary" v-if="item.status === 'progress'">正在进行中...</van-tag >
            <van-tag plain type="primary" v-else-if="item.status === 'Finish'">已完成</van-tag >
            <van-tag plain type="primary" v-else-if="item.status === 'cancel'">已取消</van-tag >
          </template>
          <template #footer>
            <van-button size="mini" @click="TraineeDetail(item)">查看详情</van-button>
            <van-button size="mini" @click="Evaluation(item)">评价教练员</van-button>
          </template>
        </van-card>
      </div>
      <div class="pagination">
        <van-pagination v-model="currentPage" @change="pageChange" :total-items="pageTotal" :items-per-page="pageSize" />
      </div>
    </div>
    <van-popup class="details" v-model="show" round  position="bottom" :style="{ height: '30%' }" >
      <div>教练员：{{coachName}} <span>电话:</span> <span>{{detailObj.telephone}}</span> </div>
      <div>学员预约时间：{{detailObj.create_time}}</div>
      <div>预约的时间段：<van-tag plain type="primary">{{detailObj.attendTime}}</van-tag ></div>
      <div>状态：
        <van-tag plain type="primary" v-if="detailObj.status === 'progress'">正在进行中...</van-tag >
        <van-tag plain type="primary" v-else-if="detailObj.status === 'Finish'">已完成</van-tag >
        <van-tag plain type="primary" v-else-if="detailObj.status === 'cancel'">已取消</van-tag >
      </div>
    </van-popup>
    <van-popup class="Fraction" v-model="showTwo" round  position="bottom" :style="{ height: '30%' }" >
      <div><span>您的评价：</span><van-rate v-model="Fraction" /></div>
      <div><van-field
        v-model="content"
        rows="2"
        autosize
        label="评价内容"
        type="textarea"
        maxlength="50"
        placeholder="请输入内容"
        show-word-limit
      /></div>
      <van-button type="primary" @click="submitHandel" block>提交</van-button>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
import chauffeur from "../js/chauffeur";
export default {
  data() {
    return{
      currentPage:1,
      content:"",
      Fraction:4,
      showTwo:false,
      show:false,
      pageSize:4,
      pageNum:1,
      pageTotal:1,
      traineeList:[],
      coachName:"",
      detailObj:{
        attendTime:"",
        create_time:"",
        status:"",
        catogary:"",
        telephone:"",
      },
      FractionObj:{
        attendTime: "",
        catogary: "",
        coach: "",
        create_time: "",
        id: 8,
        status: "",
        telephone: "",
        trainee: "",
        traineeName: "",
      },
    }
  },
  mounted(){
    this.getTraineeById(1)
  },
  methods:{
    // 提交评价
    submitHandel(){
      let nowDate = new Date().toLocaleDateString().replaceAll('/','-')
      let requestBody = {
        coach:this.FractionObj.coach,
        score:this.Fraction,
        status:"Evaluated",
        trainee:this.FractionObj.trainee,
        content:this.content,
        catogary:this.FractionObj.catogary,
        create_time:nowDate
      }
      chauffeur.makeScore(requestBody).then(res => {
        if(res.data.code === 0 && res.data.data !=="学员已评价"){
          this.showTwo = false
          Toast.success('评价成功');
        }else{
          Toast.fail(res.data.data);
        }
      })
    },
    // 查看详情
    TraineeDetail(item){
      this.detailObj = item
      chauffeur.getUserDeilById(item.coach).then(res => {
        this.coachName = res.data.data.nickname
      })
      this.show = true
    },
    // 评价教练员
    Evaluation(item){
      this.FractionObj = item
      this.showTwo = true
    },
    // 分页
    pageChange(value){
      this.getTraineeById(value)
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    getTraineeById(value){
      let requestBody = {
        pageSize:this.pageSize,
        pageNum:value
      }
      chauffeur.getTraineeById(requestBody).then(res => {
        if(res.data.code === 0){
          this.traineeList = res.data.data.list
          this.traineeList.map(item => {
            switch (item.attendTime) {
              case 'Eight':
                item.attendTime = '8:00~10:00'
                break;
              case 'ten':
                item.attendTime = '10:00~12:00'
                break;
              case 'twelve':
                item.attendTime = '12:00~14:00'
                break;
              case 'fourteen':
                item.attendTime = '14:00~16:00'
                break;
              case 'sixteen':
                item.attendTime = '16:00~18:00'
                break;
            }
          })
          this.pageNum = value
          this.currentPage = value
          this.pageTotal = res.data.data.Total
        }else
        {
          Toast.fail('未知错误');
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.container{
  .content{
    margin-top: 5%;
    height: 80vh;
    width: 90%;
    margin-left: 5%;
    border-radius: 10px;
    position: relative;
    background-color: white;
    .record{
      position: relative;
      margin-top: 5%;
      .van-card{
        border-radius: 5px;
        .van-card__content{
          .van-tag{
            margin-right: 2%;
          }
        }
      }
    }
    .pagination{
      margin-top: 5%;
    }
  }
  .details{
    div{
      margin-top: 5%;
      margin-left: 5%;
    }
  }
  .Fraction{
    div{
      margin-top: 2%;
      margin-left: 2%;
      .van-field{
        font-size: 1rem;
        margin-left: -4%;
      }
    }
  }
}
 /deep/ .van-nav-bar__title {
    color: #fff;
  }

  /deep/ .van-nav-bar__text {
    color: #fff;
  }

  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
</style>